﻿
@{
    Layout = "";
}

<style>
    .flayout_o_imgs .imgBox {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        margin: auto;
    }

    .imgBox .w_56proImg {
        width: 94%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
        margin: auto;
    }

    .w_56close {
        position: absolute;
        width: 40%;
        right: 0;
        top: -6px;
    }

    .w_56li {
        position: relative;
        float: left;
        width: 20%;
    }

    .my_row {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        overflow: hidden;
        _zoom: 1;
    }

    .myd_span {
        font-size: 15px;
        display: inline-block;
        line-height: 45px;
    }

    .pj_ul {
        width: 60%;
        float: right;
    }

        .pj_ul li {
            float: left;
            width: 33.3333%;
            text-align: center;
        }

            .pj_ul li .icon_box {
                margin: 0 auto;
            }

    .bad .icon_box {
        width: 25px;
        height: 25px;
        background: url(/Content/images/bad_a.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .pj_ul li.bad.active .icon_box {
        width: 25px;
        height: 25px;
        background: url(/Content/images/bad_b.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .in .icon_box {
        width: 25px;
        height: 25px;
        background: url(/Content/images/in_a.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .pj_ul li.in.active .icon_box {
        width: 25px;
        height: 25px;
        background: url(/Content/images/in_b.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .good .icon_box {
        width: 25px;
        height: 25px;
        background: url(/Content/images/good_a.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .pj_ul li.good.active .icon_box {
        width: 25px;
        height: 25px;
        background: url(/Content/images/good_b.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .pj_ul li p {
        font-size: 15px;
    }
</style>
<div class="w_shopcar w_submitOrder" ng-controller="AddCommentCtrl">
    <div ng-repeat="comment in ResponseData">
        <div class="w_shopcar_pershop f_a_row">
            <div class="w_odt_procon">
                <div class="w_odtpro_conleft"><img ng-src="{{ImgHostUrl+comment.ProductImgUrl}}" /></div>
                <div class="w_odtpro_conright">
                    <div class="w_odtpro_name">{{comment.ProductName}}</div>
                    <p class="w_submitOrder_gg">规格：{{comment.SpecNames}}</p>
                    <div class="w_shopcar_more">
                        <font color="#eb272a"><small>￥</small>{{comment.ProductPrice}}</font>
                        <p class="w_submitOrder_num">X<big>{{comment.ProductNum}}</big></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flayout_o">
            <textarea class="flayout_o_textarea" placeholder="请输入对商品的评价(50个字)" ng-model="comment.DPContent"></textarea>
            <div class="flayout_o_imgs">
                <div style="position:relative;float:left;width:20%;height:20%;padding:2%;" ng-repeat="imgUrl in comment.ImgUrlList track by $index">
                    <img src="/Content/images/pro_detail_03.png"
                         style="position: absolute; width: 30%; right: 0px; top: 0px;"
                         ng-click="comment.ImgUrlList.splice($index,1)">
                    <img ng-src="{{ImgHostUrl + imgUrl}}" class="w_56proImg" style="max-width: 100%; max-height: 100%" onerror="javascript: this.src = '/Content/images/up_img.png';" />
                </div>

                <div style="position:relative;float:left;width:20%;height:20%;padding:2%;" ng-click="selectImageSub(comment)" ng-show="comment.ImgUrlList.length<5">
                    <img src="/Content/images/up_img.png" style="max-width: 100%; max-height: 100%" alt="上传图片">
                </div>
                <div style="clear:both;"></div>
                @*<span ng-show="comment.ImgUrlList.length<1" class="o_upimg_txt">上传评论图片</span>*@
            </div>
        </div>


        <div class="my_row clearfix">
            <span class="myd_span">商品满意度</span>

            <ul class=" pj_ul clearfix">
                <li  ng-class="{true:'bad active',false:'bad'}[comment.CommentLevel==1]" ng-click="clevel(comment,1)">
                    <div class="icon_box">

                    </div>
                    <p>差评</p>
                </li>
                <li ng-class="{true:'in active',false:'in'}[comment.CommentLevel==2]" ng-click="clevel(comment,2)">
                    <div class="icon_box">

                    </div>
                    <p>中评</p>
                </li>
                <li ng-class="{true:'good active',false:'good'}[comment.CommentLevel==3]" ng-click="clevel(comment,3)">
                    <div class="icon_box">

                    </div>
                    <p>好评</p>
                </li>
            </ul>

        </div>
    </div>
    <input id="fileInput" class="ng-hide" type="file" nv-file-select="" uploader="uploader" />
    <div class="o_submitDiv"><input type="button" name="" value="提交" class="o_submit" ng-click="CommentSubmit()"></div>

</div>

<script type="text/javascript">
    App.controller('AddCommentCtrl', ["$scope", "$state", "$http", "$stateParams", "FileUploader", '$rootScope',
        function ($scope, $state, $http, $stateParams, FileUploader, $rootScope) {

            //数据初始化
            $http.post("/Product/GetOrderComment", { orderId: $stateParams.orderId }).then(function (response) {
                $scope.ResponseData = response.data;

            });


            $scope.CommentSubmit = function () {
                $http.post("/Product/OrderCommentSubmit", { comments: $scope.ResponseData, orderId: $stateParams.orderId }).then(function (response) {
                    if (response.data.isSuccess) {
                        layer.msg("评论成功");
                        $state.go('user.order', { status: 3 });
                    } else {
                        layer.msg(response.data.msg);
                    }

                });
            }

            $scope.clevel = function (comment, level) {
                comment.CommentLevel = level;
            }

            var tt = function () {
                $rootScope.WxShare($rootScope.pageTitle(), '优品三悦', location.href, $rootScope.LogoUrl);
            }

            setTimeout(tt, 1000)

            //-------------图片选择相关
            $scope.selectImageSub = function (currentcomment) {
                $scope.CurrentComment = currentcomment;
                $("#fileInput").click();
            }

            var handleFileSelect = function (evt) {
                var file = $scope.uploadSelectFile = evt.currentTarget.files[0];
                if (!evt.currentTarget.files[0] || ! /image\/\w+/.test(evt.currentTarget.files[0].type)) {
                    layer.msg("请选择图像文件");
                    return false;
                }
                if (file.size > 1 * 1024 * 1024) {
                    layer.msg("图片大小不能大于1MB");
                    $scope.uploadSelectFile = null;
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function (evt) {
                    $scope.$apply(function ($scope) {
                        //if ($scope.CurrentComment.ImgUrlList.length < 5) {
                        //    $scope.CurrentComment.ImgUrlList.push(evt.target.result);
                        //}
                    });
                };
                if (file)
                    reader.readAsDataURL(file);
            };

            angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
            var uploader = $scope.uploader = new FileUploader({
                url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=Comment'
            });
            uploader.filters.push({
                name: 'customFilter',
                fn: function (item /*{File|FileLikeObject}*/, options) {
                    return true;
                }
            });

            // CALLBACKS

            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                //  console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {

                if ($scope.uploadSelectFile && /image\/\w+/.test($scope.uploadSelectFile.type) && $scope.CurrentComment.ImgUrlList.length < 5) {
                    fileItem.upload();
                }

                //    console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                //   console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                // console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                // console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                //  console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function (fileItem, response, status, headers) {
                if (!$scope.CurrentComment.ImgUrlList) {
                    $scope.CurrentComment.ImgUrlList = [];
                }
                $scope.CurrentComment.ImgUrlList.push(response[0]);
                console.log($scope.CurrentComment.ImgUrlList)
                $("#fileInput").val("");
                //  console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                //  console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                // console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                //  console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                $scope.uploading = false;
            };


        }]);
</script>